<template>
	<view class="topContains">
		<view class="oneTitle font-12 px-3 py-2">
			请根据实际情况反映，平台将采纳您的反馈内容并对订单进行相应处理，该反馈不会影响您的订单推送
		</view>
		<view class="twoCenter ma-2 py-3 bg-white rounded-5">
			<view class="font-15 px-3 color000 font-bold">
				请选择反馈问题类型
			</view>
			<u-collapse accordion :border="false" class="px-0">
				<u-collapse-item :isLink="false" :clickable="false" v-for="(item, index) in reportList" :key="index"
					class="py-0">
					<view slot="title" @click="openCollapse(index)">
						<label>
							<radio class="radio" :checked="index===radiovalue1?true:false" />{{item.title}}
						</label>
					</view>
					<template v-if="item.title=='其他'">
						<u--textarea class="textarea" v-model="textareaName" placeholder="请输入内容" count maxlength="200" border="none">
						</u--textarea>
					</template>
					<template v-else>
						<view class="bg-f7 rounded-5 pa-2">
							<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
								<u-checkbox class="my-2" size="14" v-for="(itemm, indexx) in item.itemList"
									:key="indexx" :label="itemm.name" :name="itemm.id">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</template>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="threeCenter ma-2 pa-3 bg-white rounded-5">
			<view class="mb-2">
				<text class="font-bold color000 font-13">凭证图片</text>
				<text class="colorb2 font-12 ml-1">(非必填,最多5张)</text>
			</view>
			<text
			  class="iconfont icon-shangchuantupian"
			  @click="handleShootPicture"
			></text>
		</view>
		<view class="btn-four bg-white">
			<view class="btnTijiao">
				<text class="colorfff font-15">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '',
				checkboxValue1: [],
				textareaName: '111',
				reportList: [{
					id: 1,
					title: "订单信息不明确",
					disabled: false,
					itemList: [{
						id: 1,
						name: '图片不清晰',
					}, {
						id: 2,
						name: '没有尺寸说明',
					}, {
						id: 3,
						name: '地址不明确或错误',
					}]
				}, {
					id: 2,
					title: "商家引导线下交易",
					disabled: false,
					itemList: [{
						id: 1,
						name: '订单系统信息存在联系方式',
					}, {
						id: 2,
						name: '沟通引导线下交易',
					}]
				}, {
					id: 3,
					title: "其他",
					disabled: false,
				}, ]
			};
		},
		methods: {
			openCollapse(index) {
				this.radiovalue1 = index;
				this.checkboxValue1 = [];
			},
			checkboxChange(n) {
				console.log(n);
			},
			// 拍摄照片
			handleShootPicture() {
			 uni.chooseImage({
			   success: (chooseImageRes) => {
			     console.log(chooseImageRes)
			   },
			 });
			},
		}
	};
</script>

<style lang="scss" scoped>
	.topContains {
		.oneTitle {
			color: #E19A6B;
			background-color: #FFF0E9;
		}
		.radio {
			transform: scale(0.7)
		}
		.textarea{
			background-color: #f2f2f2;
			::v-deep .u-textarea__count{
				background-color: #f2f2f2 !important;
			}
		}
		.threeCenter{
			.icon-shangchuantupian {
			  color: #e5e5e5;
			  font-size: 100rpx;
			}
		}
		.btn-four{
			box-sizing: border-box;
			position: fixed;
			width: 100%;
			bottom: 0;
			padding: 20rpx;
			.btnTijiao{
				background-color: $u-primary;
				padding: 14rpx 0;
				text-align: center;
				border-radius: 12rpx;
				margin: 0 10rpx;
			}
		}
	}
	
</style>
